<template>
  <div>
    <div class="content-wrapper main" id="yiqing">

      <a :href="config.top_src" class="banner"
         :style="{background:'url('+config.top_img+') no-repeat',backgroundSize: 'cover'}">
        <!--<div class="pv">{{parseFloat(config.view_count).toLocaleString()}}人已浏览
        </div>-->
      </a>
      <div class="tab-list">
        <div class="tab-wrapper" :class="{fixed:isFixed}">
          <span :class="{active:tabIndex==0}" @click="changeTab(0)">
          疫情地图
          <i></i>
          </span>
          <span :class="{active:tabIndex==1}" @click="changeTab(1)">
            实时动态
            <i></i>
          </span>
          <span :class="{active:tabIndex==2}" @click="changeTab(2)">
            专家辟谣
            <i></i>
          </span>
          <span :class="{active:tabIndex==3}" @click="changeTab(3)">
            相关阅读
            <i></i>
          </span>
        </div>
      </div>
      <div class="data-group">
        <div v-show="showModal" class="modal-wrapper">
          <div class="mask"></div>
          <div class="modalWrap modal">
            <div class="header">数据说明</div>
            <div class="content">
              <div class="desc">
                1.数据来源： <br>
                来自国家卫健委、各省市区卫健委、各省市区政府、港澳台官方渠道公开数据；<br><br>
                2.统计原则：<br>
                a)每日上午优先将全国数据与国家卫健委公布数据对齐（此时各省市数据尚未及时更新，会出现全国数据大于各省份合计数的情况）；<br>
                b)当各省公布数据总和大于国家公布数据时，则全国数据切换为各省合计数；<br><br>
                3.页面显示的截止时间为标准北京时间，如您所在时区不是东八区，会自动转为当地时间显示；<br><br>
                4.如有遇到乡镇地方政府需要疫情图并需要自主发布公布外报一些外来人员信息给乡亲们，请联系我们QQ422108995<br>成都市一颗优雅草科技有限公司免费提供技术支持。
              </div>
            </div>
            <div class="closeWrap" @click="showModal=false"><img alt="close"
                                                src="../assets/image/close-white.png">
            </div>
          </div>
        </div>
        <div class="statistics">
          <div class="title">
            <span>截至 {{config.update_time.substr(0,config.update_time.length-3)}} 全国数据统计</span>
            <em @click="showModal=true">
              <img alt="question" src="../assets/image/question.png">数据说明
            </em>
          </div>
          <ul class="count">
            <li><strong style="color: rgb(247, 76, 49);">{{config.confirmNumber.confirm}}</strong><span>确诊病例</span></li>
            <li><strong style="color: rgb(247, 130, 7);">{{config.confirmNumber.yisi}}</strong><span>疑似病例</span></li>
            <li><strong style="color: rgb(93, 112, 146);">{{config.confirmNumber.die}}</strong><span>死亡人数</span></li>
            <li><strong style="color: rgb(40, 183, 163);">{{config.confirmNumber.safe}}</strong><span>治愈人数</span></li>
          </ul>
          <p class="tips___1FfGr"></p></div>
        <p class="descList">
          <i class="red"></i>
          传染源: 野生动物，可能中华菊头蝠
        </p>
        <p class="descList">
          <i class="red"></i>
          病毒: 新型冠状病毒 2019-nCoV
        </p>
        <p class="descList">
          <i class="orange"></i>
          传播途径: 未完全掌握，存在人传人、医务人员感染、一定范围社区传播
        </p>
        <p class="descList">
          <i class="orange"></i>
          易感人群：暂时不明，病毒存在变异可能
        </p>
        <p class="descList">
          <i class="orange"></i>
          潜伏期：1~14 天均有，平均 10 天，潜伏期内存在传染性
        </p>
      </div>
      <Tap title="疫情地图" tip="数据来源：国家及各省市地区卫健委"></Tap>
      <Map ref="map"></Map>
      <AreaTable/>
      <Tap title="实时动态" id="timeline"></Tap>
      <TimeLine :dataList="timeLineData"></TimeLine>
      <Tap title="相关视频"></Tap>
      <video-list/>

      <Tap id="piyao" title="专家辟谣" tip="查看更多" color="#4169e2" @tap="tap"></Tap>
      <div class="info-list">
        <div class="info-item" v-for="(item,index) in refutingList" :key="index" @click="clickItem(item)">
          <span class="info-title">{{item.title}}</span>
          <span class="info-time">{{item.time}}</span>
        </div>
      </div>

      <Tap id="xiangguan" title="相关阅读" tip="查看更多" color="#4169e2" @tap="tap"></Tap>
      <div class="info-list">
        <div class="info-item" v-for="(item,index) in infoList" :key="index" @click="clickItem(item)">
          <span class="info-title">{{item.title}}</span>
          <span class="info-time">{{item.time}}</span>
        </div>

      </div>

      <a :href="config.bottom_src" class="bottom"
         :style="{background:'url('+config.bottom_img+') no-repeat',backgroundSize: 'cover'}"></a>
      <advert :advertList="advertList"/>
    </div>
    <div class="share-wrapper">
      <div class="share-btn" @click="showShare=true">分享</div>
      <div class="qr-share-btn" @click="share">二维码分享</div>
    </div>
    <div class="mask" v-if="showShare" @click="()=>{this.showShare=false}">
      <div class="arrow"></div>
      <div class="hint">
        点击右上角更多
        <br>
        分享给好友或到朋友圈
      </div>
    </div>
  </div>

</template>

<script>

  import Map from '@/components/Common/Map/Map'
  import Tap from '@/components/Common/Tap'
  import TimeLine from '@/components/Common/TimeLine'
  import VideoList from '@/components/Common/VideoList'
  import Advert from '@/components/Common/Advert'
  import AreaTable from "./Common/AreaTable";

  export default {
    name: "Index",
    components: {
      AreaTable,
      Map,
      Tap,
      TimeLine,
      VideoList,
      Advert
    },
    data() {
      return {
        config: window.config,
        showShare: false,
        showModal:false,
        tabIndex: 0,
        tabTop: 133,
        isFixed: false,
        timeLineData: window.time_line,
        refutingList: window.refutingList,
        infoList: window.infoList,
        advertList: window.advertList
      }
    },
    methods: {
      share() {
        this.$refs.map.makeCanvas();
      },
      clickItem(item) {
        window.open(item.src);
      },
      changeTab(index) {
        this.tabIndex = index;
        switch (index) {
          case 0:
            document.getElementById("yiqing").scrollIntoView();
            break;
          case 1:
            document.getElementById("timeline").scrollIntoView();
            break;
          case 2:
            document.getElementById("piyao").scrollIntoView();
            break;
          case 3:
            document.getElementById("xiangguan").scrollIntoView();
            break;
        }

      },
      handleScroll() {
        var scrollTop =
          window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > this.tabTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
        //防止滚动事件和标签点击事件冲突
        //如果网页总高度-当前窗口可视高度=当前滚动距离等于,到底部了
        if (scrollTop == document.body.offsetHeight - window.innerHeight) {
          return;
        }

        if (scrollTop > 842) {
          this.tabIndex = 1;
        } else if (scrollTop > 900) {
          this.tabIndex = 2;
        } else {
          this.tabIndex = 0;
        }

      },
      tap(title) {
        if (title == '专家辟谣') {
          this.$router.push({path: '/yiqing/info/refuting'})
          return;
        }
        if (title == '相关阅读') {
          this.$router.push({path: '/yiqing/info/list'})
          return;
        }
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll);
    }
  }
</script>

<style lang="scss">
  .content-wrapper {
    padding-bottom: 64px;
  }

  .banner {
    display: block;
    position: relative;
    width: 100%;
    height: 1.25rem;
    color: #fff;
    font-size: .28rem;
    text-align: center;

    .pv {
      position: absolute;
      top: .095rem;
      right: 0;
      height: .24rem;
      padding: 0 .08rem 0 .12rem;
      color: #fff;
      font-size: .11rem;
      line-height: .24rem;
      background-color: rgba(173, 38, 38, 0.6);
      border-top-left-radius: .12rem;
      border-bottom-left-radius: .12rem;
    }
  }

  .tab-list {
    height: .44rem;
    line-height: .44rem;
    background-color: #fff;
    .tab-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-content: center;
      align-items: center;
      .active {
        color: #f43f3f;
        i {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          display: inline-block;
          width: .5rem;
          height: .03rem;
          margin: auto;
          background-color: #f43f3f;
        }
      }
      &.fixed {
        margin: 0 auto;
        max-width: 550px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
      }
      height: .44rem;
      line-height: .44rem;
      background-color: #fff;
      span {
        position: relative;
        display: inline-block;
        color: #333;
        font-size: .15rem;
        text-align: center;
        vertical-align: top;

      }
    }
  }

  .data-group {
    margin-top: .16rem;
    margin-bottom: .16rem;
    padding: .16rem;
    background: #fff;
    .modal-wrapper{
      width: 100%;
      max-width: 550px;
      z-index: 999;
      .mask{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
        z-index: 98;

      }
      .modal{
        padding: .2rem .16rem;
      }
      .modalWrap{
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 99;
        width:80%;
        font-size: .14rem;
        background-color: #fff;
        border-radius: .05rem;
        transform: translate(-50%,-50%);
        .header{
          margin-bottom: .08rem;
          color: #4169e2;
          font-weight: 500;
          font-size: .17rem;
          line-height: .24rem;
        }
        .content{
          height: 3.6rem;
          margin-right: -.05rem;
          padding-right: .05rem;
          overflow: auto;
        }
        .closeWrap{
          position: absolute;
          bottom: -.61rem;
          left: 50%;
          width: .41rem;
          height: .41rem;
          line-height: .3rem;
          text-align: center;
          border-radius: 100%;
          transform: translateX(-50%);
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .statistics {
      margin: -.16rem 0 .12rem;
      font-size: .12rem;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .08rem 0 .04rem;
        line-height: .24rem;
        span {
          color: #666;
        }
        em {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: .24rem;
          margin-right: -.16rem;
          padding: 0 .08rem;
          color: #666;
          font-style: normal;
          background-color: #f7f7f7;
          border-radius: .12rem 0 0 .12rem;
          img {
            width: .123rem;
            height: .123rem;
            margin-right: .037rem;
          }
        }
      }
      .count {
        display: flex;
        margin: 0 -.16rem;
        padding: 0;
        li {
          display: flex;
          flex: 1 1;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: .64rem;
          strong {
            font-weight: 600;
            font-size: .19rem;
            line-height: .265rem;
          }
        }
      }
    }
    .data-time {
      text-align: center;
      span {
        display: inline-block;
        height: .24rem;
        padding: 0 .1rem;
        color: #666;
        font-size: .13rem;
        line-height: .24rem;
        text-align: center;
        background-color: #f7f7f7;
        border-radius: .24rem;
      }
    }
    .confirm-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      align-content: center;
      .confirm-item {
        display: flex;
        flex-direction: column;
        .red {
          color: #d81d1b;

        }
        .confirm-number {
          font-size: .3rem;
          margin-bottom: .01rem;
          font-weight: bold;
        }
        .confirm-title {

        }
      }
    }
    .descList {
      margin-bottom: .04rem;
      font-size: .15rem;
      line-height: .23rem;
      i {
        &.orange {
          display: inline-block;
          width: .1rem;
          height: .1rem;
          margin-right: .13rem;
          background: url('../assets/image/dot_orange.png') no-repeat;
          background-size: cover;
        }
        &.red {
          display: inline-block;
          width: .1rem;
          height: .1rem;
          margin-right: .13rem;
          background: url('../assets/image/dot_red.png') no-repeat;
          background-size: cover;
        }

      }
    }
  }

  .share-wrapper {

    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: content-box;
    width: 100%;
    max-width: 550px;
    height: .56rem;
    font-size: .16rem;
    line-height: .44rem;
    text-align: center;
    background-color: #fff;
    .share-btn {
      position: relative;
      flex: none;
      width: 40%;
      height: .4rem;
      line-height: .4rem;
      background-color: #f43f3f;
      border-radius: .2rem;
      color: #fff;
    }
    .qr-share-btn {
      position: relative;
      flex: none;
      width: 55%;
      height: .4rem;
      line-height: .4rem;
      background-color: #2d25f4;
      border-radius: .2rem;
      color: #fff;
    }
  }

  .info-list {
    display: flex;
    flex-direction: column;
    margin: .16rem;
    .info-item {
      position: relative;
      padding-bottom: .06rem;
      .info-title {
        display: block;
        margin-right: .8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666;
        font-size: .14rem;
      }
      .info-time {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .6);
    .arrow {
      position: absolute;
      top: .23rem;
      right: .17rem;
      width: 1.03rem;
      height: 1.11rem;
      background-image: url('../assets/image/arrow.png');
      background-size: 100% 100%;
    }
    .hint {
      position: absolute;
      top: 1.2rem;
      right: .84rem;
      color: #fff;
      font-weight: 500;
      font-size: .16rem;
    }
  }

</style>
